<template>
  <div class="cateManager">
    <!-- 头部 -->
    <myheader title="频道管理">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
    </myheader>

    <!-- 点击删除频道 -->
    <div class="deleteCate">
      <h3>点击删除频道</h3>
      <div class="list">
        <span v-for="v in categoryList" :key="v.id" @click="removeCate(v)">{{
          v.name
        }}</span>
      </div>
    </div>

    <!-- 点击添加频道 -->
    <div class="addCate">
      <h3>点击添加频道</h3>
      <div class="list">
        <span v-for="v in addCateList" :key="v.id" @click="addCate(v)">{{
          v.name
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import { getCateList } from "@/apis/category";
export default {
  data() {
    return {
      categoryList: [],
      addCateList: [],
    };
  },
  components: {
    myheader,
  },
  async mounted() {
    this.categoryList = JSON.parse(localStorage.getItem("categoryList"));

    // 如果本地存储里面没有数据  操作
    if (!this.categoryList) {
      //   获取栏目列表
      let res = await getCateList();
      console.log(res);
      this.categoryList = res.data.data;
      if (localStorage.getItem("mytoken")) {
        this.categoryList.splice(0, 2);
      } else {
        this.categoryList.splice(0, 1);
      }
      console.log(this.categoryList);
    }

    this.addCateList = JSON.parse(localStorage.getItem("addCateList") || "[]");
  },
  methods: {
    // 删除栏目处理函数
    removeCate(value) {
      // 1.先添加至添加数组
      this.addCateList.push(value);
      // 2.删除对应的栏目，可以通过id，也可以通过索引值删除，索引值方法(需要传递一个索引值参数)：this.categoryList.splice(index,1)
      this.categoryList = this.categoryList.filter((v) => {
        return v.id != value.id;
      });
      // 3.进行本地存储
      localStorage.setItem("addCateList", JSON.stringify(this.addCateList));
      localStorage.setItem("categoryList", JSON.stringify(this.categoryList));
    },
    // 添加栏目处理函数
    addCate(value) {
      // 1.先添加至添加数组
      this.categoryList.push(value);
      // 2.删除对应的栏目，可以通过id，也可以通过索引值删除，索引值方法(需要传递一个索引值参数)：this.addCateList.splice(index,1)
      this.addCateList = this.addCateList.filter((v) => {
        return v.id != value.id;
      });
      // 3.进行本地存储
      localStorage.setItem("addCateList", JSON.stringify(this.addCateList));
      localStorage.setItem("categoryList", JSON.stringify(this.categoryList));
    },
  },
};
</script>

<style lang="less" scoped>
.deleteCate,
.addCate {
  padding: 20px;
  h3 {
    font-weight: 700;
    margin-bottom: 20px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    span {
      width: 22%;
      border: 1px solid #ccc;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 15px 0;
      text-align: center;
    }
  }
}
</style>